import {CCard} from '@/components/card'
import {IconImg, ParamOfStatus} from '@/components/image'
import {CItemUpDown} from '@/components/item'
import RollerDigital from '@/components/rollerDigital'
import {SplitLine} from '@/components/splitLine'
import {CnMediumP, CnNormalP, CnNormalSpan} from '@/components/text'
import {PropType} from 'vue'

export const WaterAnalyzeCard = defineComponent({
  props: {
    pageData: {
      type: Object as PropType<SingleDevParams.DevDataAnalyse>,
      required: true
    }
  },
  setup(props, ctx) {
    return () => (
      <CCard class='w-full h-260  rounded-4 bg-white overflow-hidden' title='水质异常'>
        <div class='w-full h-full flex flex-col'>
          <div class='w-full h-48 flex items-center mt-20'>
            <IconImg imgName='warning-light' class='w-48 h-full mr-16'></IconImg>
            <div class='h-full flex flex-col'>
              <p class='flex items-center h-27 leading-27'>
                <RollerDigital
                  class='text-24 mx-6 h-full align-top'
                  endVal={props.pageData.paramExceptionCount}
                ></RollerDigital>
                <CnNormalSpan class='text-12'>次</CnNormalSpan>
              </p>
              <CnMediumP class='flex-1'>{props.pageData.checkResult}</CnMediumP>
            </div>
          </div>
          <SplitLine class='w-full h-1 p-0 mt-20'></SplitLine>
          <div class='w-full flex-1 overflow-hidden'>
            <div class='h-full overflow-y-auto'>
              {props.pageData.paramExceptionList.map(item => (
                <CItemUpDown
                  class='pt-10 pr-8 pb-16 pl-10'
                  title={item.devName}
                  subTitle={item.devReportTime}
                >
                  <div class='h-18'>
                    <ParamOfStatus
                      name={item.paramName}
                      status={item.paramStatusCode}
                    ></ParamOfStatus>
                    <CnNormalSpan class='ml-32'>{item.paramValue}</CnNormalSpan>
                    <CnNormalSpan>{item.paramUnit}</CnNormalSpan>
                    <CnNormalSpan class='ml-32'>{item.paramStatus}</CnNormalSpan>
                  </div>
                </CItemUpDown>
              ))}
            </div>
          </div>
          <div class='w-full h-28 mt-11'>
            <a-button class='rounded-2 bg-primaryLight h-full float-right'>
              <CnNormalSpan class='text-12 text-primary'>查看</CnNormalSpan>
            </a-button>
          </div>
        </div>
      </CCard>
    )
  }
})

export const WaterAnalyzeCardLoading = defineComponent({
  setup() {
    return () => (
      <CCard
        class='w-full h-260  rounded-4 bg-white overflow-hidden'
        title='水质分析'
        loading={true}
      ></CCard>
    )
  }
})
